<!--
 * @Description: 文书--头部
 * @Author: E-CHOOSEUS R&D
 * @Date: 2021-11-19 09:28:54
 * @LastEditors: E-CHOOSEUS R&D
-->
<template>
  <div class="docHeaderCompact" :class="[orientation]">
    <header :style="{ paddingTop: padTop }">
      <div>
        <img
          :src="logo1"
          :alt="docHeaderLogo1Title1 + '&' + docHeaderLogo1Title2 + '院徽'"
        />
        <div>
          <span class="title" v-html="docHeaderLogo2TitleArr"></span>
          <span class="title" v-html="docHeaderLogo1Title1Arr"></span>
          <span class="title" v-html="docHeaderLogo1Title2Arr"></span>
        </div>
      </div>
    </header>
    <div
      v-if="patCur"
      class="user-info"
      :class="[data.titleType === 1 ? '' : 'end']"
    >
      <h5>{{ data.title }}</h5>
      <div v-if="data.unit" class="unit">
        <span>制表单位：{{ hospitalName }}</span>
        <span>第{{ pageIndex + 1 }}页/第{{ pageNum }}页</span>
      </div>
      <div class="info">
        <div
          v-for="(item, idx) in headConfig"
          :key="idx"
          :class="{ noFlex: data.type == 12 }"
        >
          <span>{{ item.label }}：</span>
          <span v-if="item.key == 'patientName'">{{ nameArr.join('→') }}</span>
          <span v-else-if="item.key == 'bedNumber'">{{
            bedArr.join('→')
          }}</span>
          <span v-else-if="item.key == 'wardName'">{{
            wardArr.join('→')
          }}</span>
          <span v-else>{{ formatVal(item.value, item.key) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const userInfo = {
  姓名: 'patientName',
  病区: 'wardName',
  出生日期: 'birthday',
  住院号: 'hospitalNumber',
  病历号: 'hospitalNumber',
  床号: 'bedNumber',
  性别: 'gender',
  诊断: 'rkzd',
  年龄: 'age',
  科室: 'deptName'
}
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import { createNameAndBedArr } from '@/utils/createNameAndBedArr.js'
import { formatTimeStamp } from '@/utils/index.js'
import { getStoreFromInstance } from '@/utils/instance'

export default defineComponent({
  name: 'DocHeaderCompact',
  props: {
    data: {
      type: Object,
      required: true
    },
    padTop: {
      type: [String, Number],
      default: '20px'
    },
    recordData: {
      type: Array,
      default: () => []
    },
    pageIndex: {
      type: Number,
      default: 0
    },
    pageNum: {
      type: Number,
      default: 1
    },
    orientation: {
      type: String,
      default: 'portrait'
    }
  },
  setup(props) {
    const state = reactive({
      headConfig: [],
      docHeaderLogo1Title1Arr: '',
      docHeaderLogo1Title2Arr: '',
      docHeaderLogo2TitleArr: '',
      nameArr: [],
      bedArr: [],
      wardArr: [],
      hospitalName: window.hospitalName,
      docHeaderLogo1Title1: window.docHeaderLogo1Title1,
      docHeaderLogo1Title2: window.docHeaderLogo1Title2,
      docHeaderLogo2Title: window.docHeaderLogo2Title,
      logo1:
        '',
      logo2:
        ''
    })

    const store = getStoreFromInstance()

    const patCur = computed(() => store.getters.patCur)

    function formatVal(value, key) {
      if (key == 'gender') {
        return value === 1 ? '男' : '女'
      } else if (key == 'age') {
        return value ? value + '岁' : ''
      } else if (key == 'birthday') {
        return value ? formatTimeStamp(value, 'yyyy-MM-dd') : ''
      }
      return value
    }

    function initData() {
      state.docHeaderLogo1Title1Arr = genTitleArr(state.docHeaderLogo1Title1)
      state.docHeaderLogo1Title2Arr = genTitleArr(state.docHeaderLogo1Title2)
      state.docHeaderLogo2TitleArr = genTitleArr(state.docHeaderLogo2Title)
    }

    function genTitleArr(val) {
      if (!val) return ''
      const arr = val.split('')
      let title = ''
      arr.map(res => {
        title += `<span>${res}</span>`
      })
      return title
    }

    function getNameAndBed() {
      if (patCur.value) {
        const originBedList = patCur.value.bedList || [] // 所有的床号列表原始数据结构
        const originNameList = patCur.value.nameList || [] // 所有的姓名列表原始数据结构
        const originWardList = patCur.value.wardList || [] // 所有的姓名列表原始数据结构
        const { nameArr, bedArr, wardArr } = createNameAndBedArr(
          originBedList,
          originNameList,
          originWardList,
          props.recordData
        )
        state.nameArr = nameArr
        state.bedArr = bedArr
        state.wardArr = wardArr
      } else {
        setTimeout(() => {
          getNameAndBed()
        }, 200)
      }
    }

    watch(
      patCur,
      (n, o) => {
        if (
          n &&
          (!o ||
            n.patientIdent != o.patientIdent ||
            (n.patientIdent == o.patientIdent &&
              n.startRkTime != o.startRkTime))
        ) {
          if (n.rkZdList && n.rkZdList.length > 0) {
            n.rkzd = n.rkZdList
              .map((v, i) => `${i + 1}.${v.content}`)
              .join('，')
          }
          const config = cloneDeep(props.data.headConfig)
          const arr = []
          const infoObj = {}
          if (config) {
            config.map(res => {
              arr.push({
                label: res,
                key: userInfo[res],
                value: n[userInfo[res]]
              })
              infoObj[userInfo[res]] = n[userInfo[res]]
            })
          }
          state.headConfig = arr
        }
      },
      { immediate: true }
    )

    watch(
      () => props.recordData,
      val => {
        if (val) {
          getNameAndBed()
        }
      },
      { deep: true, immediate: true }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      patCur,
      formatVal
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';

.docHeaderCompact {
  &.portrait {
    width: 672px;
  }

  &.landscape {
    width: 960px;
  }
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  // display: grid;
  // grid-template-columns: getPx(909) auto;
  font-family: SiYuanSong-Bold, SimSun, '宋体';

  & > div {
    display: flex;
    align-items: center;

    img {
      margin-right: getpx(15);
    }

    &:nth-child(1) {
      // width: 290px;
      padding-right: 16px;
      font-size: getpx(50);

      img {
        height: getpx(156);
        margin-right: getpx(37);
      }

      & > div {
        // width: getPx(660);
      }

      span {
        height: getpx(55);
        display: block;
        font-weight: bolder;

        &.title {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }

    &:nth-child(2) {
      font-size: getpx(60);

      img {
        height: getpx(117);
      }
    }
  }
}

.user-info {
  font-family: SiYuanSong-Medium, SimSun, '宋体';
  margin: getpx(44) auto 0;
  padding-bottom: getpx(23);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  h5 {
    margin: 0;
    text-align: center;
    font-size: getpx(80);
    font-weight: bold;
    letter-spacing: getpx(2);
  }

  &.end {
    flex-direction: column-reverse;

    h5 {
      width: 100%;
      margin-top: getpx(52);
      padding-top: getpx(40);
    }
  }

  .unit {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin: 10px 0 0;
  }

  .info {
    padding-top: getpx(42);
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-size: getpx(46);

    & > div {
      // width: calc(100% / 6);
      display: flex;
      align-items: center;

      span {
        text-align: center;

        &:nth-child(2) {
          margin-left: getpx(27);
          text-decoration: underline;
        }
      }

      .titleInner {
        font-size: 19px;
        text-align: center;
        margin-top: 13px;
      }
    }

    .noFlex {
      display: block;
    }
  }
}
</style>
